<template>
  <div class="login-page">
    <el-row>
      <el-col :span="15" class="login-left">
        <div class="login-logo">
          <img src="../../assets/images/login_login.png" alt="" />
        </div>

        <div class="web-text">
          <h3 class="web-text-title">
            <p>国信安</p>
            <p>学生考试PC系统</p>
          </h3>

          <div class="web-text-en">
            <p>GUOXINAN</p>
            <p>Student examination PC system</p>
          </div>
        </div>
        <div class="web-text-footer">教育承载未来,学习实现梦想!</div>
      </el-col>
      <el-col :span="9" class="login-right-wrap">
        <el-row>
          <el-col :span="16" :offset="4">
            <div class="login-right-body">
              <h3 class="login-title">
                <RouterLink to="/login">登录</RouterLink>
                <!-- <RouterLink to="">注册</RouterLink> -->
              </h3>
              <el-form
                :model="userForm"
                ref="ruleFormRef"
                :rules="userRules"
                class="login-form"
              >
                <el-form-item prop="username">
                  <el-input
                    v-model="userForm.username"
                    class="w-50 m-2"
                    placeholder="请输入账号"
                    :prefix-icon="User"
                  />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="userForm.password"
                    class="w-50 m-2"
                    type="password"
                    placeholder="请输入密码"
                    :prefix-icon="Lock"
                    show-password
                  />
                </el-form-item>

                <el-form-item label="角色" prop="type">
                  <el-radio-group v-model="userForm.type">
                    <el-radio label="student">学生</el-radio>
                    <el-radio label="teacher">教师</el-radio>
                  </el-radio-group>
                </el-form-item>

                <!-- <el-form-item class="auto-group">
                  <el-checkbox label="保存密码" name="save" />
                  <el-checkbox label="自动登录" name="auto" />
                </el-form-item> -->

                <el-form-item class="login-form-footer">
                  <el-button
                    type="primary"
                    class="login-btn"
                    @click="onSubmit(ruleFormRef)"
                    >立即登录</el-button
                  >
                  <!-- <p>学生用户登录测试用: 13333333333 / 123456</p>
                  <p>管理员登录测试用: 13111111111 / 123456</p> -->
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { useStore } from "../../stores/index";
import { useRouter } from "vue-router";

const router = useRouter();
const store = useStore();
const ruleFormRef = ref<FormInstance>();

const userForm = reactive({
  username: "",
  password: "",
  type: "",
});

const userRules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 11, max: 14, message: "请输入正确的手机号", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 16, message: "长度限制在 3 到 16 位", trigger: "blur" },
  ],
  type: [
    {
      required: true,
      message: "必须选择其中的角色",
      trigger: "change",
    },
  ],
});

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  await formEl.validate((valid, fields) => {
    if (!valid) {
      return console.log("error submit!", fields);
    }

    if (userForm.type === "student") {
      store
        .studentLoginAction({
          phone: userForm.username,
          pwd: userForm.password,
        })
        .then(() => {
          router.push("/");
        })
        .catch((err) => {
          ElMessage.error(err);
        });
    } else if (userForm.type === "teacher") {
      store
        .teacherLoginAction({
          phone: userForm.username,
          pwd: userForm.password,
        })
        .then(() => {
          router.push("/");
        })
        .catch((err) => {
          ElMessage.error(err);
        });
    }
  });
};
</script>

<style lang="scss">
@mixin font-style(
  $size: 40px,
  $family: (
    "微软雅黑",
    "MicrosoftYaHei",
    "宋体",
    Arial,
  )
) {
  font-size: $size;
  font-family: $family;
}

.login-page {
  background: url("../../assets/images/login_bg.png") no-repeat left/cover;
}

.login-left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 50px;
  color: #fff;

  .web-text {
    margin: 30px 0;
  }
  .web-text-title {
    @include font-style();
  }

  .web-text-en {
    @include font-style(25px, (Arial, Helvetica, sans-serif));

    p:first-child {
      padding-right: 10px;
      padding-top: 20px;
      margin-top: 20px;

      &::before {
        position: absolute;
        top: 0;
        display: block;
        content: "";
        width: 160px;
        height: 1px;
        background-color: #fff;
      }
    }
  }

  .web-text-footer {
    @include font-style(15px);
  }
}

.login-right-wrap {
  background-color: #fff;
}

.login-right-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.login-title {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.login-title a {
  font-size: 30px;
  padding: 0 10px;
  color: #555;
}

.auto-group .el-form-item__content {
  justify-content: space-between;
}

.login-form-footer {
  margin-top: 50px;
}

.login-btn {
  width: 100%;
}
</style>
